<template>
  <el-dialog width="70%" :append-to-body="true"  :title="title" :visible.sync="visible">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <el-form :inline="true" :model="searchModel" size="small">
        <el-form-item label="资产ID">
          <el-input v-model="searchModel.number" placeholder="资产ID"></el-input>
        </el-form-item>
        <el-form-item label="合同号">
          <el-input v-model="searchModel.contractNamber" placeholder="合同号"></el-input>
        </el-form-item>
        <el-form-item label="资产名称">
          <el-input v-model="searchModel.name" placeholder="资产名称"></el-input>
        </el-form-item>

        <template v-if="toggleSearchStatus">
          <el-form-item label="批次">
            <el-input v-model="searchModel.batch" placeholder="批次"></el-input>
          </el-form-item>
          <el-form-item>
            <el-form-item label="入库时间">
              <el-col class="dateCol" :span="11">
                <el-date-picker type="date" placeholder="开始时间" v-model="searchModel.inDate_begin" style="width: 100%;"></el-date-picker>
              </el-col>
              <el-col class="line" :span="1">-</el-col>
              <el-col class="dateCol" :span="11">
                <el-date-picker type="date" placeholder="结束时间" v-model="searchModel.inDate_end" style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
          </el-form-item>
        </template>
        <el-form-item>
                <span style="float: left;overflow: hidden;" class="">
                    <el-button type="primary" @click="searchQuery" icon="el-icon-search">查询</el-button>
                    <el-button type="primary" @click="searchReset" icon="el-icon-refresh" style="margin-left: 8px">重置
                    </el-button>

                    <el-button @click="handleToggleSearch()" type="text" size="small">
                        {{ toggleSearchStatus ? '收起' : '展开' }}
                        <i :class="toggleSearchStatus ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                    </el-button>
                </span>
        </el-form-item>
      </el-form>
    </div>

    <!-- table区域-begin -->
    <div class="project">
      <el-table :data="dataSource"
                @row-click="rowClick"
                style="width: 100%"
                border
                :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                v-loading="loading" size="small">
        <el-table-column fixed align="center" label="#"  width="55">
          <template slot-scope="scope">
            <el-radio v-model="singleSelRowKey" :label="scope.row.id">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="number" fixed width="150" label="资产ID"></el-table-column>
        <el-table-column width="150" fixed prop="contractNamber" label="合同号"></el-table-column>
        <el-table-column width="150" fixed prop="name" label="资产名称" sortable></el-table-column>
        <el-table-column width="110" prop="batch" label="批次" sortable></el-table-column>
        <el-table-column width="120" prop="inDate" label="入库日期" sortable></el-table-column>
        <el-table-column width="110" prop="code" label="分类编码" sortable></el-table-column>
        <el-table-column width="120" label="资产大类" sortable>
          <template slot-scope="scope">
            {{ ['土地','房屋及构筑物','通用设备','车辆','专用设备','文物及陈列品','图书档案','家具用具及装具'][scope.row.classes-1] }}
          </template>
        </el-table-column>
        <el-table-column width="150" prop="typeName" label="分类名称" sortable></el-table-column>
        <el-table-column width="150" prop="depreciationMonth" label="资产折旧总月数" sortable></el-table-column>
        <el-table-column width="120" prop="price" label="单价（元）" sortable></el-table-column>
        <el-table-column width="300" label="规格型号" sortable>
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.model"  effect="light">
              <span> {{scope.row.model}}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column width="200" prop="buyer" label="购买单位" sortable></el-table-column>
        <el-table-column width="100" prop="isFixed" label="固定资产"sortable>
          <template slot-scope="scope">
            {{scope.row.isFixed ? "是":"否"}}
          </template>
        </el-table-column>
        <el-table-column  width="100" prop="isFax" label="是否含税" sortable>
          <template slot-scope="scope">
            {{scope.row.isFixed ? "是":"否"}}
          </template>
        </el-table-column>
        <el-table-column width="120" prop="usefulLife" label="使用期限" sortable></el-table-column>
        <el-table-column width="100" label="状态">
          <template slot-scope="scope">
            {{ ['闲置','已领用','已处置'][scope.row.state-1] }}
          </template>
        </el-table-column>
      </el-table>

      <pagination
        :total="ipagination.total"
        :page.sync="ipagination.current"
        :limit.sync="ipagination.pageSize"
        @pagination="loadData"
      ></pagination>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>

  import Vue from 'vue'
  import { SingleTableMixins } from '@/mixins/SingleTableMixins'

  export default {
    name: "SelectAssetsModal",
    mixins: [ SingleTableMixins ],
    data () {
      return {
        title:"选择资产",
        visible: false,
        loading:false,
        /* 分页参数 */
        ipagination:{
          pageSize:10,
          current:1,
          total: 0,
        },
        model: {},
        url: {
          list: "/asset/list",
        },  // 新增资产表单验证
      }
    },
    created () {

    },
    methods: {
      open() {
        this.visible = true;
        this.loadData(1);
      },
      handleSubmit () {
        const that = this;
        that.$emit('ok',that.singleSelRows);
        that.close();
      },
      handleCancel () {
        this.close()
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
    }
  }
</script>

<style scoped>

</style>
